<template>
  <div :class="prefixCls">
    <a-select
      v-if="query"
      v-model:value="state"
      :options="selectOptions"
      :disabled="disabled"
      style="width: 100%"
      v-bind="attrs"
      @change="onSelectChange"
    />
    <a-switch v-else
              v-model:checked="checked"
              :disabled="disabled"
              v-bind="attrs"
              @change="onSwitchChange"
              :checked-children="checkedChildren"
              :un-checked-children="unCheckedChildren"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { propTypes } from '/@/utils/propTypes';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { useDesign } from '/@/hooks/web/useDesign';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
const { prefixCls } = useDesign('j-switch');
const props = defineProps({
  // v-model:value
  value: propTypes.oneOfType([propTypes.string, propTypes.number]),
  // 取值 options
  options: propTypes.array.def(() => [1, 0]),
  // 文本 options
  labelOptions: propTypes.array.def(() => ['是', '否']),
  // 是否使用下拉
  query: propTypes.bool.def(false),
  // 是否禁用
  disabled: propTypes.bool.def(false),
  // 开关：选中时的内容
  checkedChildren: propTypes.string.def("是"),
  // 开关：非选中时的内容
  unCheckedChildren: propTypes.string.def("否"),
});
const attrs = useAttrs();
const emit = defineEmits(['change', 'update:value']);

const checked = ref<boolean>(false);
const [state] = useRuleFormItem(props, 'value', 'change');
watch(
  () => props.value,
  (val) => {
    if (!props.query) {
      if (!val) {
        checked.value = false;
        emitValue(props.options[1]);
      } else {
        checked.value = props.options[0] == val;
      }
    }
  },
  { immediate: true }
);

const selectOptions = computed(() => {
  let options: any[] = [];
  options.push({ value: props.options[0], label: props.labelOptions[0] });
  options.push({ value: props.options[1], label: props.labelOptions[1] });
  return options;
});

function onSwitchChange(checked) {
  let flag = checked === false ? props.options[1] : props.options[0];
  emitValue(flag);
}

function onSelectChange(value) {
  emitValue(value);
}

function emitValue(value) {
  emit('change', value);
  emit('update:value', value);
}
</script>

<style lang="less">
//noinspection LessUnresolvedVariable
@prefix-cls: ~'@{namespace}-j-switch';

.@{prefix-cls} {
}
</style>
